<template>
	<a-card>
		<a-form layout="inline" :model="formState">
			<a-form-item label="用户名称">
				<a-input v-model:value="formState.keywords" placeholder="请输入用户名称">
				</a-input>
			</a-form-item>
			<a-form-item>
				<a-button style="margin-right: 8px" class="searchButton" type="primary" html-type="submit" @click="init">
					查询
				</a-button>
				<a-button class="editable-add-btn"  type="primary" @click="addOpenclick">新增</a-button>
			</a-form-item>
		</a-form>

		<a-table  :scroll="{ x: 800 }" ref="table" childrenColumnName="child" :columns="columns" :row-key="(record) => record.admin_id"
			 :data-source="tabledata">
			<template #bodyCell="{ column, record }">

				<template v-if="column.key === 'action'">
					<a-popconfirm title="确定要删除该数据" ok-text="确定" cancel-text="取消" @confirm="deleteConfirm(record)">
						<a-button type="link" style="color: red;">删除</a-button>
					</a-popconfirm>

					<a-button type="link" @click="editOpenclick(record)">编辑</a-button>
					<a-dropdown>
						<a class="ant-dropdown-link" @click.prevent>
							更多
							<DownOutlined />
						</a>
						<template #overlay>
							<a-menu>
								<a-menu-item @click="adminMENU(record,0)">
									<a href="javascript:;">初始化密码</a>
								</a-menu-item>
								<a-menu-item @click="adminMENU(record,1)">
									<a href="javascript:;">详情</a>
								</a-menu-item>
							</a-menu>
						</template>
					</a-dropdown>
				</template>
			</template>
		</a-table>
		<a-drawer v-model:visible="addOpen" class="custom-class" :root-style="{ color: 'blue' }" style="color: red"
			title="新增" placement="right">
			<a-form layout="vertical" :model="addFormData">
				<a-form-item label="用户名称">
					<a-input v-model:value="addFormData.name" placeholder="请输入用户名称">
					</a-input>
				</a-form-item>
				<a-form-item label="登录账号">
					<a-input v-model:value="addFormData.user" placeholder="请输入登录账号">
					</a-input>
				</a-form-item>
				<a-form-item label="分组">
					<a-tree-select
						v-model:value="addFormData.group_id"
						show-search
						:tree-data="treeData"
						:replaceFields="replaceFields"
						style="width: 100%"
						:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
						placeholder="请选择分组"
						allow-clear
						tree-default-expand-all
					>
					</a-tree-select>
				</a-form-item>
				<a-form-item label="角色">
					<a-select
						v-model:value="addFormData.role_id"
						:options="options"
						placeholder="请选择角色"
						:fieldNames="fieldNames"
						>

					</a-select>
				</a-form-item>
				<a-form-item label="手机号">
					<a-input v-model:value="addFormData.phone" placeholder="请输入手机号">
					</a-input>
				</a-form-item>
				<a-form-item label="备注">
					<a-input v-model:value="addFormData.remarks" placeholder="请输入备注">
					</a-input>
				</a-form-item>
			</a-form>
			<template #footer>
				<a-button style="margin-right: 8px" @click="addOpen = false">取消</a-button>
				<a-button type="primary" @click="handleAdd">提交</a-button>
			</template>
		</a-drawer>
		<!-- 编辑 -->
		<a-drawer v-model:visible="editOpen" class="custom-class" :root-style="{ color: 'blue' }" style="color: red"
			title="编辑" placement="right">
			<a-form layout="vertical" :model="addFormData">
				<a-form-item label="用户名称">
					<a-input v-model:value="addFormData.name" placeholder="请输入用户名称">
					</a-input>
				</a-form-item>
				<a-form-item label="登录账号">
					<a-input v-model:value="addFormData.user" placeholder="请输入登录账号">
					</a-input>
				</a-form-item>
				<a-form-item label="分组">
					<a-tree-select
						v-model:value="addFormData.group_id"
						show-search
						:tree-data="treeData"
						:replaceFields="replaceFields"
						style="width: 100%"
						:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
						placeholder="请选择分组"
						allow-clear
						tree-default-expand-all
					>
					</a-tree-select>
				</a-form-item>
				<a-form-item label="角色">
					<a-select
						v-model:value="addFormData.role_id"
						:options="options"
						placeholder="请选择角色"
						:fieldNames="fieldNames"
						>

					</a-select>
				</a-form-item>
				<a-form-item label="手机号">
					<a-input v-model:value="addFormData.phone" placeholder="请输入手机号">
					</a-input>
				</a-form-item>
				<a-form-item label="备注">
					<a-input v-model:value="addFormData.remarks" placeholder="请输入备注">
					</a-input>
				</a-form-item>
			</a-form>
			<template #footer>
				<a-button style="margin-right: 8px" @click="editOpen = false">取消</a-button>
				<a-button type="primary" @click="handleedit">提交</a-button>
			</template>
		</a-drawer>
		<a-modal v-model:visible="detalisOpen" :ok-button-props="{ display: 'none' }">
			<a-descriptions title="详情">
				<a-descriptions-item label="名称">{{datalistFORM.name}}</a-descriptions-item>
				<a-descriptions-item label="账号">{{datalistFORM.user}}</a-descriptions-item>
				<a-descriptions-item label="分组">{{datalistFORM.group}}</a-descriptions-item>
				<a-descriptions-item label="角色">{{datalistFORM.role}}</a-descriptions-item>
				<a-descriptions-item label="手机号">
					{{datalistFORM.phone}}
				</a-descriptions-item>
			</a-descriptions>
			<template #footer>
				<a-button style="margin-right: 8px" @click="detalisOpen = false">关闭</a-button>
			</template>
		</a-modal>

	</a-card>
</template>

<script>
import adminJsApi from '@/api/auth/admin';
import groupJsApi from '@/api/auth/group';
import roleJsApi from '@/api/auth/role';
import { notification, message } from 'ant-design-vue'
export default {
	name: 'Other',
	data() {
		return {
			gData: [],
			detalisOpen:false,
			addOpen: false,
			addFormData: {},
			treeData:[],
			replaceFields:	{children:'child', label:'name', key:'group_id', value: 'group_id' },
			editOpen: false,
			rowSelection: {
				onChange: (selectedRowKeys, selectedRows) => {
					console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
				},
				onSelect: (record, selected, selectedRows) => {
					console.log(record, selected, selectedRows);
				},
				onSelectAll: (selected, selectedRows, changeRows) => {
					console.log(selected, selectedRows, changeRows);
				},
			},
			formState: {},
			fieldNames: {
				value: 'role_id',
				label: 'role',
			},
			columns: [
				{
					title: '用户名称',
					dataIndex: 'name',
					key: 'name',
					width:'200px',
				},
				{
					title: '登录账号',
					dataIndex: 'user',
					key: 'user',
					width:'200px',
				},
				{
					title: '用户分组',
					dataIndex: 'group',
					key: 'group',
					width:'200px',
				},
				{
					title: '用户角色',
					dataIndex: 'role',
					key: 'role',
					width:'200px',
				},
				{
					title: '手机号',
					dataIndex: 'phone',
					key: 'phone',
					width:'100px',
				},
				{
					title: '备注信息',
					dataIndex: 'user',
					key: 'user',
					width:'200px',
				},
				{
					title: '操作',
					dataIndex: 'action',
					key: 'action',
					align:'center',
					width:'490px',
				},
			],
			tabledata: [],
			datalistFORM:{}
		}
	},
	created() {
		groupJsApi.groupTree({pid:'null'}).then(res =>{
			this.treeData = res
		})
		roleJsApi.roleList({pagination:0,limit:100}).then(res =>{
			this.options = res
		})
		this.init()
	},
	methods: {

		init() {
			adminJsApi.adminList({page:1,...this.formState}).then(res => {
				this.tabledata = res
			})
			// adminJsApi.adminList({page:1,...this.formState}).then(res => {
			// 	this.tabledata = res
			// })
		},
		clicktree(selectedKeys) {
			this.formState.pid = selectedKeys[0]
			this.addFormData.pid = selectedKeys[0]
		},
		addOpenclick(){

			this.addOpen = true
		},
		adminMENU(record,key){
			console.log(record)
			if(key == 0){
				adminJsApi.admininItpwd({id:record.admin_id}).then(res =>{

				})

			}else {
				this.detalisOpen = true
				adminJsApi.adminSingle({id:record.admin_id}).then(res =>{
					this.datalistFORM = res
				})
			}
		},
		handleAdd() {
			if (this.addFormData && !this.addFormData.name) {
				notification['error']({
					message: '用户名称不能为空！',
				});
				return
			}
			adminJsApi.adminAdd(this.addFormData).then(res => {
				this.addOpen = false
				this.addFormData = {}
				this.init()
			})
		},
		deleteConfirm(record) {
			adminJsApi.adminDel({ id: record.admin_id }).then(res => {
				this.formState = {}
				message.success('删除成功')
				this.init()
			})

		},
		editOpenclick(record) {
			this.addFormData = record
			this.editOpen = true
		},
		handleedit() {
			if (this.addFormData && !this.addFormData.name) {
				notification['error']({
					message: '用户名称不能为空！',
				});
				return
			}
			adminJsApi.adminEdit(this.addFormData).then(res => {
				this.editOpen = false
				this.addFormData = {}
				this.init()
			})
		}
	}
}
</script>
<style lang="less" scoped>
	@import '../index.less';
</style>
